import React, { Component } from "react";

import NavHeader from "../../components/NavHeader";

import HouseItem from '../../components/HouseItem'

// import axios from "axios";
// import {API} from '../../utils/API'

import { getCurrentCity ,API } from "../../utils";

import classNames from "classnames";

// 引入 antd-mobile 
import {Toast} from 'antd-mobile'

// import "./index.scss";
import styles from "./index.module.scss";

// 在 react 脚手架中，如果需要访问 全局对象，可以通过显式指定 window 来访问
// 覆盖物样式
const labelStyle = {
  cursor: "pointer",
  border: "0px solid rgb(255, 0, 0)",
  padding: "0px",
  whiteSpace: "nowrap",
  fontSize: "12px",
  color: "rgb(255, 255, 255)",
  textAlign: "center"
};

const BMap = window.BMap;
export default class Map extends Component {
    
    state={
      // 小区房源
      houseList:[],
      // 展示小区列表
      isShowList: false
    }
   

  async componentDidMount() {
    // 1 创建百度地图实例对象
    const map = new BMap.Map("container");
    this.map = map;
    const { label, value } = await getCurrentCity();

    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();
    // 将地址解析结果显示在地图上，并调整地图视野
    myGeo.getPoint(
      null,
      async point => {
        if (point) {
          map.centerAndZoom(point, 11);
          // 添加控件
          map.addControl(new BMap.NavigationControl());
          map.addControl(new BMap.ScaleControl());
          // 渲染覆盖物
          this.renderOverlays(value);

          // 绑定移动事件当地图移动时 隐藏 房屋列表
          map.addEventListener('movestart',()=>{
            this.setState({
              isShowList:false
            })
          })
        }
      },
      label
    );
  }

  // 获取下一级的放大级别 和 覆盖物类型
  getTypeAndZoom() {
    const curZoom = this.map.getZoom();
    let nextZoom, type;
    if (curZoom === 11) {
      type = "circle";
      nextZoom = 13;
    } else if (curZoom === 13) {
      type = "circle";
      nextZoom = 15;
    } else {
      type = "rect";
    }
    return { nextZoom, type };
  }

  // 渲染覆盖物
  async renderOverlays(value) {
    // 加载提示
    Toast.loading('Loading...',0);
    const { data } = await API.get("/area/map", {
      params: {
        id: value
      }
    });
    // 隐藏提示物
    Toast.hide()
    const { nextZoom, type } = this.getTypeAndZoom();

    data.body.forEach(item => {
      // 创建覆盖物
      this.createOverlays(item, nextZoom, type);
    });
  }

  // 更具 type 的值判断 要创建的覆盖物是那种形式
  createOverlays(item, nextZoom, type) {
    const {
      coord: { latitude, longitude },
      count,
      label: areaName,
      value: areaId
    } = item;
    // 2 创建地图中心点坐标实例对象
    const point = new BMap.Point(longitude, latitude);
    if (type === "circle") {
      this.createCircle(point, count, areaName, areaId, nextZoom);
    } else {
      this.createRect(point, count, areaName, areaId);
    }
  }

  //创建圆形覆盖物
  createCircle(point, count, areaName, areaId, nextZoom) {
    let opts = {
      position: point, // 指定文本标注所在的地理位置
      offset: new BMap.Size(-35, -35) //设置文本偏移量
    };
    // Label 就是一个覆盖物
    let label1 = new BMap.Label("", opts); // 创建文本标注对象

    label1.setContent(
      `<div class="${styles.bubble}">
          <p class="${styles.name}">${areaName}</p>
          <p>${count}套</p>
       </div>`
    );

    // 注册点击事件
    label1.addEventListener("click", () => {
      // console.log(areaId);
      this.renderOverlays(areaId);
      this.map.centerAndZoom(point, nextZoom);
      // 清楚现有覆盖物
      setTimeout(() => {
        this.map.clearOverlays();
      }, 0);
    });
    label1.setStyle(labelStyle);
    this.map.addOverlay(label1);
  }

  // 创建矩形的覆盖物
  createRect(point, count, areaName, areaId) {
    let opts = {
      position: point, // 指定文本标注所在的地理位置
      offset: new BMap.Size(-35, -35) //设置文本偏移量
    };
    // Label 就是一个覆盖物
    let label1 = new BMap.Label("", opts); // 创建文本标注对象

    label1.setContent(
      ` <div class="${styles.rect}">
          <span class="${styles.housename}">${areaName}</span>
          <span class="${styles.housenum}">${count}套</span>
          <i class="${styles.arrow}"></i>
        </div>`
    );

    label1.setStyle(labelStyle);
    // 注册点击事件
    label1.addEventListener("click", (e) => {
      // console.log(areaId);
      const {clientX,clientY} = e.changedTouches[0]
      const x = window.innerWidth/2 - clientX
      const y = (window.innerHeight-330)/2 - clientY
        
      this.map.panBy(x,y)
      // 获取房源数据
      this.getHouses(areaId)
      // 显示房源列表
      this.setState({
        isShowList: true
      })
    });

    this.map.addOverlay(label1);
  }

 async getHouses(cityId){
    const res = await API.get('/houses',{
      params:{
        cityId
      }
    })
    this.setState({
      houseList:res.data.body.list
    })
  }

  // 渲染小区列表数据
  renderHouseList() {
    return this.state.houseList.map(item => (
      <HouseItem key={item.houseCode} {...item}></HouseItem>
    ));
  }

  render() {
    return (
      <div className={styles.map}>
        {/*  顶部 */}
        <NavHeader className={styles.navHeader}>地图找房</NavHeader>
        <div id="container" className={styles.container} />

        {/* 小区中的房源列表结构 */}
        <div
          className={classNames(styles.houseList, {
            [styles.show]: this.state.isShowList
          })}
        >
          <div className={styles.titleWrap}>
            <h1 className={styles.listTitle}>房屋列表</h1>
            <a className={styles.titleMore} href="/house/list">
              更多房源
            </a>
          </div>
          <div className={styles.houseItems}>{this.renderHouseList()}</div>
        </div>
      </div>
    );
  }
}
